<template>
    <div ref="lineChartRef" style="width: 100%; height: 400px"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import echarts from '@/stores/echarts'

const props = defineProps({
    title: {
		type: String,
		required: true
	},
	legendData: {
		type: Array,
		required: true
	},
	xAxisData: {
		type: Array,
		required: true
	},
	series: {
		type: Array,
		required: true
	}
})

const lineChartRef = ref()

onMounted(() => {
    let lineChart = echarts.init(lineChartRef.value)
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: props.title
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: props.legendData
        },
        toolbox: {
            // 下载
            //   feature: {
            //     saveAsImage: {},
            //   },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: props.xAxisData
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: props.series
    }
    // 使用刚指定的配置项option和数据显示图表myChart。
    lineChart.setOption(option)
})
</script>
<style scoped></style>
